<template>
  <div>
    <el-dialog
      title="选择专家"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <div class="expert-selector">
        <el-input
                v-model="searchQuery"
                placeholder="请输入专家昵称搜索"
                style="width: 300px"
                clearable
                @clear="handleSearch"
                @input="handleSearch"
            >
                <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
            </el-input>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          @row-click="handleRowClick"
        >
          <el-table-column prop="id" label="ID" align="center" width="80">
          </el-table-column>
          <el-table-column prop="avatar" label="头像" align="center" width="120">
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.avatar"
                fit="fill"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" align="center">
          </el-table-column>
          <el-table-column prop="desc" label="简介" align="center">
          </el-table-column>
          <el-table-column prop="competitions" label="擅长联赛" align="center">
          </el-table-column>
          <el-table-column prop="fans" label="粉丝数" align="center" width="100">
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { expertList } from '../../libs/api'

export default {
  name: 'ExpertSelector',
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      currentPage: 1,
      totalCount: 0,
      pageSize: 5,
      pageSizes: [10, 20, 30, 50],
      searchQuery: ''
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.getExpertList()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleRowClick(row) {
      this.$emit('select', row)
      this.handleClose()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getExpertList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getExpertList()
    },
    handleSearch() {
      this.currentPage = 1;
      this.getExpertList()

    },
    getExpertList() {
      expertList({
        page: this.currentPage,
        limit: this.pageSize,
        expertName: this.searchQuery
      }).then(res => {
        this.tableData = res.data.list
        this.totalCount = res.data.total
      })
    }
  }
}
</script>

<style scoped>
.expert-selector {
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  cursor: pointer;
}

.el-table__row:hover {
  background-color: #f5f7fa;
}
</style> 